<!--
 * @description  : 拆包销售
 * @descriptionDetail: 拆包销售
 * @copyright    : 浙江烟草
 * @author       : lt
 * @create       : 2022-09-27 09:58:58
-->

<template>
  <view>
    <u-form-item :label="params.label" label-position="top" :required="true">
    </u-form-item>
    <view v-for="(it, idx) in params.listDatas" :key="idx" @click="fuzhi(it)">
      <u-form-item label="">
        <u-row gutter="2">
          <u-col v-if="false" v-model="it.checkSale"></u-col>
          <u-col span="4">
            {{ it.productName }}
          </u-col>
          <u-col span="8" @click="fuzhi(it)">
            <view>
              <u-input
                :border="false"
                type="select"
                :placeholder="$attrs.placeholder || '请选择'"
                v-model="it.checkSaleName"
                @click="fuzhi(it)"
              ></u-input>
              <u-popup mode="bottom" height="60%" border-radius="16" v-model="dictShow" @touchmove.prevent>
                <multi-select :options="dictOptions" @select="handleSelect"></multi-select>
              </u-popup>
            </view>
          </u-col>
        </u-row>
      </u-form-item>
    </view>
  </view>
</template>
<script>
import MultiSelect from '@/components/multi-select.vue';
export default {
  components: {MultiSelect,}, 
  props: {
    params:{
      label: String,
      listDatas: Array,
      contentOptions: String,
    },
  },
  data() {
    return {
      products:this.params.listDatas,
      itemData: '',
      selectProductCode: '',
      errorMessage:'拆包销售为必填项', 
      dictList:[],
      dictOptions:[],
      dictShow: false,
    };
  },
  onLoad(){  
  },
  created() {
    this.dictList = this.$u.dic.getByDictCode(this.params.contentOptions);
    this.dictOptions = this.dictList.map(d => {
      d.uid = d.value;
      d.name = d.label;
      return d;
    });
  },
  methods: {
    fuzhi(e){
      this.selectProductCode = e.productCode;
      this.dictShow = true;
    },
    // 多选弹窗选中确认
    handleSelect(items) {
      let name = items.map(it => it.name);
      let value = items.map(it => it.value);
      this.params.listDatas.forEach(e => {
        if(e.productCode == this.selectProductCode){
          e.checkSaleName = name;
          e.checkSale = value;
        }
      });
      this.itemData = this.params.contentOptions;
      this.dictShow = false;
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss" scoped>

</style>